<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">{{ formLabelAlign.type == 'add' ? '新增' : '编辑' }}</div>
              <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                返回上一頁
              </div>
            </div>
            <div class="mt40">
              <template v-if="formLabelAlign.type == 'edit'">
                <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign.formInfo" style="max-width: 600px">
                  <el-form-item label="ID:">
                    <el-input v-model="formLabelAlign.formInfo.id" disabled style="width: 380px;" placeholder="請輸入用戶名" />
                  </el-form-item>
                  <el-form-item label="等級:">
                    <el-input v-model="formLabelAlign.formInfo.scale" disabled placeholder="請輸入昵稱" />
                  </el-form-item>
                  <el-form-item label="等級名稱:">
                    <el-input v-model="formLabelAlign.formInfo.scale_name" disabled placeholder="請輸入昵稱" />
                  </el-form-item>
                  <el-form-item label="等級logo:" style="align-items:flex-start;font-weight:bold;">
                    <el-upload v-model:file-list="fileList" :action="$upUrl" list-type="picture-card" :headers="headers" name="images" :on-success="onSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                      <div class="uploader flex-cen" v-if="fileList.length == 0">
                        <el-icon size="60" style="color: #3a3f63;">
                          <Picture />
                        </el-icon>
                      </div>
                      <el-button class="btn2 ml20">選擇文件</el-button>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="團隊人數:">
                    <el-input v-model="formLabelAlign.formInfo.agent_num" placeholder="請輸入團隊人數" />
                  </el-form-item>
                  <el-form-item label="團隊業績:">
                    <el-input v-model="formLabelAlign.formInfo.performance" placeholder="請輸入團隊業績" />
                  </el-form-item>
                  <el-form-item label="團隊權益:">
                    <el-input v-model="formLabelAlign.formInfo.introduce" placeholder="請輸入團隊權益" />
                  </el-form-item>
                  <el-form-item label="抽成比例:">
                    <el-input v-model="formLabelAlign.formInfo.bili" placeholder="請輸入抽成比例" />
                  </el-form-item>
                  <el-form-item label="達成條件:">
                    <el-radio-group v-model="radio" class="ml-4">
                      <el-radio value="1" size="large">業績</el-radio>
                      <el-radio value="2" size="large">人數</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="創建時間:">
                    <el-input v-model="formLabelAlign.formInfo.created_at" disabled placeholder="請輸入密碼" />
                  </el-form-item>
                  <el-form-item label="更新時間:">
                    <el-input v-model="formLabelAlign.formInfo.updated_at" disabled placeholder="請輸入密碼" />
                  </el-form-item>
                </el-form>
              </template>

              <template v-if="formLabelAlign.type == 'add'">
                <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign.formInfo" style="max-width: 600px">
                  <el-form-item label="等級:">
                    <el-input v-model="formLabelAlign.formInfo.scale" placeholder="請輸入等級" style="width: 380px;" />
                  </el-form-item>
                  <el-form-item label="等級名稱:">
                    <el-input v-model="formLabelAlign.formInfo.scale_name" placeholder="請輸入等級名稱" />
                  </el-form-item>
                  <el-form-item label="等級logo:" style="align-items:flex-start;font-weight:bold;">
                    <el-upload v-model:file-list="fileList" :action="$upUrl" list-type="picture-card" :headers="headers" name="images" :on-success="onSuccess" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                      <div class="uploader flex-cen" v-if="fileList.length == 0">
                        <el-icon size="60" style="color: #3a3f63;">
                          <Picture />
                        </el-icon>
                      </div>
                      <el-button class="btn2 ml20">選擇文件</el-button>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="團隊人數:">
                    <el-input v-model="formLabelAlign.formInfo.agent_num" placeholder="請輸入團隊人數" />
                  </el-form-item>
                  <el-form-item label="團隊業績">
                    <el-input v-model="formLabelAlign.formInfo.performance" placeholder="請輸入團隊業績" />
                  </el-form-item>
                  <el-form-item label="團隊權益">
                    <el-input v-model="formLabelAlign.formInfo.introduce" placeholder="請輸入團隊權益" />
                  </el-form-item>
                  <el-form-item label="抽成比例">
                    <el-input v-model="formLabelAlign.formInfo.bili" placeholder="請輸入抽成比例" />
                  </el-form-item>
                  <el-form-item label="達成條件:">
                    <el-radio-group v-model="radio" class="ml-4">
                      <el-radio value="1" size="large">業績</el-radio>
                      <el-radio value="2" size="large">人數</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-form>
              </template>

              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1" @click="reset()">重置</el-button>
                  <el-button class="btn2" @click="submit()">提交</el-button>
                </div>

              </div>
            </div>


          </div>

        </el-col>

      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import type { FormProps } from 'element-plus'
import { brokerEdit, addLevel } from '@/api/brokers'
import { baseURL, headers, formateDate } from '@/utils/utils'
onMounted(() => {
  console.log('传递参数', route.query)
  formLabelAlign.type = route.query.type
  if (route.query.type == 'edit') {
    formLabelAlign.formInfo = route.query
    let file = [
      {
        name: 'logo',
        url: `${route.query.logo}`
      }
    ]
    fileList.value = file
  }
})
const onSuccess = (res) => {
  console.log('上传成功', res)
  let path = res.data[0].path
  let fullpath = `${baseURL}${path}`
  let file = [
    {
      name: 'levelLogo',
      url: fullpath
    }
  ]
  fileList.value = file

}
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  fileList.value = []
}
const labelPosition = ref<FormProps['labelPosition']>('right')
const radio = ref('1')
const fileList = ref([])
const formLabelAlign = reactive({
  formInfo: {},
  type: 'add'
})
// 重置
const reset = () => {
  if (formLabelAlign.type == 'edit') {
    formLabelAlign.formInfo.agent_num = ''
    formLabelAlign.formInfo.performance = ''
    formLabelAlign.formInfo.introduce = ''
    formLabelAlign.formInfo.bili = ''
    fileList.value = []
    radio.value = '1'
  }
  if (formLabelAlign.type == 'add') {
    formLabelAlign.formInfo.scale = ''
    formLabelAlign.formInfo.scale_name = ''
    formLabelAlign.formInfo.agent_num = ''
    formLabelAlign.formInfo.performance = ''
    formLabelAlign.formInfo.introduce = ''
    formLabelAlign.formInfo.bili = ''
    fileList.value = []
    radio.value = '1'
  }
}
// 提交
const submit = () => {
  if (fileList.value.length == 0) {
    return ElMessage.error('請上傳圖片')
  }
  if (formLabelAlign.formInfo.agent_num == '') {
    return ElMessage.error('請輸入團隊人數')
  }
  if (formLabelAlign.formInfo.performance == '') {
    return ElMessage.error('請輸入團隊業績')
  }
  if (formLabelAlign.formInfo.introduce == '') {
    return ElMessage.error('請輸入團隊權益')
  }
  if (formLabelAlign.formInfo.bili == '') {
    return ElMessage.error('請輸入抽成比例')
  }
  if (formLabelAlign.type == 'edit') {
    brokerEdit({
      id: formLabelAlign.formInfo.id,
      logo: fileList.value.length ? fileList.value[0].url : '',
      agent_num: formLabelAlign.formInfo.agent_num,
      performance: formLabelAlign.formInfo.performance,
      introduce: formLabelAlign.formInfo.introduce,
      bili: formLabelAlign.formInfo.bili,
      condition: radio.value
    }).then((res) => {
      console.log('等级提交', res)
      back()
    })
  }
  if (formLabelAlign.type == 'add') {
    addLevel({
      scale: formLabelAlign.formInfo.scale,
      scale_name: formLabelAlign.formInfo.scale_name,
      logo: fileList.value.length ? fileList.value[0].url : '',
      agent_num: formLabelAlign.formInfo.agent_num,
      performance: formLabelAlign.formInfo.performance,
      introduce: formLabelAlign.formInfo.introduce,
      bili: formLabelAlign.formInfo.bili,
      condition: radio.value
    }).then((res) => {
      console.log('添加成功')
      back()
    })
  }

}
const route = useRoute()
const router = useRouter()
const back = () => {
  router.back()
}
</script>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
  width: auto;
}

:deep(.el-input) {
  box-shadow: none;
}

:deep(.el-input) {
  --el-input-focus-border-color: #dcdfe6;
  --el-input-hover-border-color: #dcdfe6;
  --el-input-focus-border: transparent;
}
</style>